<template>
    
    <el-form ref="formRef" class="pl-3" :model="formData" label-width="80px" inline>
        
        <el-card class="!border-none flex flex-1 items-center justify-center" shadow="never">
            <div class=" w-[800px]">
                <div class=" text-lg	 mb-4">
                    基本信息
                </div>
                
                <div class="pl-3 grid grid-cols-2 gap-0">
                    <div>
                        
                        <el-form-item label="公司名称" prop="companyName"
                                      :rules="[{required: true, message:'公司姓名不可为空',trigger:'change'}]">
                            <el-input class="w-56" v-model.number="formData.companyName" placeholder="请输入公司姓名"
                                      clearable/>
                        </el-form-item>
                    </div>
                    
                    <div>
                        <el-form-item label="法人名称" prop="legalPersonName">
                            <el-input class="w-56" v-model.number="formData.legalPersonName"
                                      placeholder="请输入法人名称"
                                      clearable/>
                        </el-form-item>
                    </div>
                    
                    <div>
                        <el-form-item label="公司电话" prop="companyPhone">
                            <el-input class="w-56" v-model.number="formData.companyPhone" placeholder="请输入公司电话"
                                      clearable/>
                        </el-form-item>
                    </div>
                </div>
            
            </div>
        </el-card>
        
        <el-card class="!border-none flex flex-1 items-center justify-center mt-2">
            <div class=" w-[800px]">
                <div class=" text-lg	 mb-4">地址信息</div>
                
                <div class="pl-3  grid grid-cols-2 gap-0">
                    <div>
                        <el-form-item label="省市区" prop="address"
                                      :rules="[{required: true, message:'省市区不可为空',trigger:'change'}]">
                            
                            <el-cascader
                                class="w-56"
                                placeholder="请选择省市区"
                                :options="afterSaleOrderConfig.addressTree"
                                v-model="formData.address"
                                :props="{
                                  value: 'name',
                                  label: 'name',
                                  children: 'children',
                                  expandTrigger: 'hover' }"
                                @change="handleAddressChange"
                            />
                        </el-form-item>
                    
                    </div>
                    
                    <div>
                        <el-form-item label="详细地址" prop="companyAddress"
                                      :rules="[{required: true, message:'详细地址不可为空',trigger:'change'}]">
                            <el-input class="w-56" v-model="formData.companyAddress" placeholder="请输入详细地址"
                                      clearable/>
                        </el-form-item>
                    </div>
                
                </div>
            
            </div>
        </el-card>
    </el-form>
    
    <footer-btns>
        <el-button type="primary" @click="handleSubmit">创建</el-button>
    </footer-btns>

</template>

<script lang='ts' setup>


import {ShallowRef, UnwrapNestedRefs} from "@vue/reactivity";
import {useAfterSaleEnumManager} from "@/manager/base/AfterSaleEnumManager";
import useMultipleTabsManager from "@/manager/base/MultipleTabsManager";
import CrmCorporationDTO from "@/api/logistics/dto/CrmCorporationDTO";
import {createCorporation} from "@/api/logistics/CrmCorporationController";
import RouterManager from "@/manager/base/RouterManager";
import router from "@/base/router";
import {shallowRef} from "vue";
import {FormInstance} from "element-plus";


let formData: UnwrapNestedRefs<CrmCorporationDTO> = reactive(new CrmCorporationDTO());

const formRef: ShallowRef = shallowRef<FormInstance>()


/**
 * 地址选择
 *
 * @param value
 */
function handleAddressChange(value: string[]) {
    formData.address = value
    formData.economize = value[0]
    formData.city = value[1]
    formData.county = value[2]
}


let afterSaleOrderConfig = useAfterSaleEnumManager();
let multipleTabsManager = useMultipleTabsManager();

function handleSubmit() {
    formRef.value?.validate().then(() => {
        createCorporation(formData).then(response => {
            multipleTabsManager.removeTab()
            let routePathByName = RouterManager.getRoutePathByName("logistics/client/corporation/index");
            if (routePathByName) {
                router.push(routePathByName)
            }
        })
    })
}

</script>





